@@ 头部菜单
<div class="header">
    <div class="profile-box">
        <div class="avatar">
            <img src="https://zodream.cn/assets/images/zx.jpg" alt="">
        </div>
        <div class="info">
            <div class="name">zodream</div>
            <div class="remark">开发者</div>
        </div>
    </div>
    <ul class="menu-bar">
        <li class="active">
            <a href="#home">
                <i class="fa fa-home"></i>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="#about">
                <i class="fa fa-user"></i>
                <span>关于</span>
            </a>
        </li>
        <li>
            <a href="#resume">
                <i class="fa fa-graduation-cap"></i>
                <span>履历</span>
            </a>
        </li>
        <li>
            <a href="#portfolio">
                <i class="fa fa-briefcase"></i>
                <span>作品</span>
            </a>
        </li>
        <li>
            <a href="#blog">
                <i class="fa fa-book"></i>
                <span>文章</span>
            </a>
        </li>
        <li>
            <a href="#link">
                <i class="fa fa-link"></i>
                <span>友链</span>
            </a>
        </li>
    </ul>

    <div class="social-links">
        <a href="">
            <i class="fab fa-github"></i>
        </a>
        <a href="">
            <i class="fab fa-qq"></i>
        </a>
        <a href="">
            <i class="fab fa-google"></i>
        </a>
    </div>

    <div class="header-action">
        <a href="">下载简历</a>
    </div>

    <div class="copyright">
        Copyright ©zodream.cn, All Rights Reserved.
    </div>
</div>

<div class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
</div>